<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 69 76"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path data-follow-stroke="currentColor" stroke-linecap="round" stroke-width="3.5" d="M9.482 19.99c0 2.07-1.563 3.747-3.491 3.747-1.928 0-3.491-1.678-3.491-3.747s1.563-3.746 3.49-3.746c1.929 0 3.492 1.677 3.492 3.746Zm0 0h8.939a1 1 0 0 1 .65.242l16.893 14.502a1 1 0 0 0 .652.242h8.938M38.573 18.74h8.145m-1.164 16.235c0-2.07 1.563-3.747 3.491-3.747 1.928 0 3.491 1.678 3.491 3.747s-1.563 3.746-3.49 3.746c-1.928 0-3.492-1.677-3.492-3.746ZM9.482 46.215c0 2.069-1.563 3.746-3.491 3.746-1.928 0-3.491-1.677-3.491-3.746 0-2.07 1.563-3.747 3.49-3.747 1.929 0 3.492 1.678 3.492 3.747Zm0 0h19.782m0 0c0-2.07 1.563-3.747 3.49-3.747 1.928 0 3.492 1.678 3.492 3.747s-1.564 3.746-3.492 3.746c-1.927 0-3.49-1.677-3.49-3.746Zm30.254 3.746c0-2.07 1.563-3.746 3.491-3.746 1.928 0 3.491 1.677 3.491 3.746s-1.563 3.746-3.49 3.746c-1.929 0-3.492-1.677-3.492-3.746Zm0 0H48.3a1 1 0 0 0-.71.297L33.05 64.962a1 1 0 0 1-.712.296h-8.892m29.091-46.516h4.655m4.654 0H66.5M10.645 10H15.3m3.49 0h3.492M10.646 74h5.818m5.818 0h3.49m5.819 0h2.327M53.7 67.756h4.654m3.492 0h3.49M17.627 31.23c-1.928 0-3.49 1.678-3.49 3.747s1.562 3.746 3.49 3.746c1.928 0 3.491-1.677 3.491-3.746 0-2.07-1.563-3.747-3.49-3.747Zm29.091 32.78c-1.928 0-3.49 1.678-3.49 3.747 0 2.07 1.562 3.746 3.49 3.746 1.928 0 3.491-1.677 3.491-3.746s-1.563-3.746-3.49-3.746Z" :stroke="_stroke"/><circle stroke-width="4" stroke="#fff" r="4.5" cy="6.5" cx="34.5"/><circle stroke-width="4" stroke="#fff" r="4.5" cy="60.5" cx="11.5"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Group626703 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
